<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <!--引入Jquery依赖-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--引入bootstrap依赖-->
    <link rel="stylesheet" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--引入分页功能的依赖-->
    <link rel="stylesheet" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.min.js"></script>
    <title>分页功能的测试</title>
    <script type="text/javascript">
        $(function () {
            $("#demo_page").bs_pagination({
                currentPage: 1,//当前页号，相当于PageNo
                rowsPerPage: 20,//每页显示的数据数,相当于PageSize
                totalRows: 100,//总条数
                totalPages: 50,//总页数，必填参数，没有默认值
                visiblePageLinks: 10,//最多可以显示的卡片数

                showGoToPage: true,//boolean值，是否显示跳转的“跳转到”的部分,默认true
                showRowsPerPage: true,//是否显示“每页显示条数”部分，默认true--显示
                showRowsInfo: true,//是否显示记录信息，默认为true

                //用户每次切换页号，都会执行本段函数
                //每次切换页号之后，返回的pageNo和pageSize
                onChangePage:function (event,pageObj){
                    //js代码

                }
            });
        });
    </script>
</head>
<body>
<div id="demo_page"></div>
</body>
</html>
